<template>
	<view>
		<uni-row v-for="(item, index) in shopcar" class="demo-uni-row">
			<uni-col :span="3">
				<label><checkbox :checked="item.status" @click="checkItem(item.id)" /></label>
			</uni-col>
			<uni-col :span="15"><uni-card :title="item.name" :sub-title="item.goods_brief" :thumbnail="item.primary_pic_url" :isFull="true" :extra="item.num"></uni-card></uni-col>

			<uni-col :span="6"><uni-number-box v-model="item.num" @change="changeNum" /></uni-col>
		</uni-row>

		<view class="footer">
			<!-- footer -->
			<label>
				<checkbox :checked="checked" @click="checkAll" />
				<text>全选</text>
			</label>
			<text>总价：{{ allPrice }}</text>
			<button type="default" @click="clear">选中删除</button>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';
export default {
	data() {
		return {};
	},
	methods: {
		...mapMutations(['checkItem', 'checkAll', 'clear',"changeNum"])
	},
	computed: {
		...mapState(['shopcar', 'checked']),
		...mapGetters(['allPrice'])
	}
	//辅助函数拿到购物车数据
	// 辅助函数有四个
	// mapState, mapMutations,mapGetters,mapActions
	//  mapMutations, 和 mapActions展开在methods中
	//  mapState, mapGetters展开在计算属性 computed中
	// 展开的方法都一样
	// 	...mapGetters(["allPrice"])
};
</script>

<style lang="scss" scoped>
.footer {
	position: fixed;
	bottom: 90rpx;
	width: 100%;
	left: 0;
	height: 90rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>
